.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: var(--spacing-5, 20px);
  font-family: var(--main-font, Inter);
  background-color: var(--global-background);
}

.main {
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-2, 8px);
  align-items: flex-start;
  max-width: 100%;
  padding: var(--spacing-5, 20px);
  background: var(--callout-warning-background, rgba(255, 215, 72, 0.1));
  border-left: 1px solid var(--callout-warning-border, rgba(255, 215, 72, 0.2));
}

.iconWrapper {
  display: none;
}

@media screen and (min-width: 768px) {
  .wrapper {
    gap: var(--spacing-10, 40px);
    justify-content: center;
    padding: 0px var(--spacing-6, 24px);
  }

  .main {
    gap: var(--spacing-6, 24px);
    padding: var(--spacing-8, 32px);
  }

  .iconWrapper {
    display: flex;
    align-items: center;
    width: 24px;
    padding-top: var(--spacing-1, 4px);
  }
}
